<template>
  <div>
    <div class="L-timeLine-container">
      <div class="L-timeLine-item" v-for="(item) in alldata" :key="item.operationtime">
        <div class="line-side">
          <div class="point-box">
            <!-- &nbsp; -->
            <div class="point">&nbsp;</div>
          </div>
        </div>
        <div class="content-side">
          <div class="node-container">
            <div class="node-box">
              <div class="node-title">{{item.dep_sname}}</div>
              <div class="node-content">
                <div class="user-row">
                  <img src="@/assets/img_avatar_man2.png" style="width:60px;">
                  <div>
                    <div style="color:#287dd6;font-weight:bold">{{item.user}}</div>
                    <div style="color:#999;font-size:12px">
                      <i class="el-icon-time"></i>
                      {{item.operationtime}}
                    </div>
                  </div>
                </div>
                <div class="content-row">
                  <div>{{item.opinion}}</div>
                  <div style="margin-top:20px">
                    <div class="file-item-row" v-for="item in item.file" :key="item.file_path" @click="handleClickFile(item)">
                        <img v-if="item.file_type==='jpg'" src="@/assets/jpg.png" />
                        <img v-if="item.file_type==='pdf'" src="@/assets/pdf.png" />
                        <img v-if="item.file_type==='zip'" src="@/assets/zip.png" />
                        <img v-if="item.file_type==='txt'" src="@/assets/txt.png" />
                        <img v-if="item.file_type==='docx'" src="@/assets/docx.png" />
                        <img v-if="item.file_type==='gif'" src="@/assets/gif.png" />
                        <img v-if="item.file_type==='doc'" src="@/assets/doc.png" />
                        <img v-if="item.file_type==='png'" src="@/assets/png.png" />
                        <img v-if="item.file_type==='ppt'" src="@/assets/ppt.png" />
                        <img v-if="item.file_type==='pptx'" src="@/assets/pptx.png" />
                        <img v-if="item.file_type==='rar'" src="@/assets/rar.png" />
                        <img v-if="item.file_type==='xls'" src="@/assets/xls.png" />
                        <img v-if="item.file_type==='xlsx'" src="@/assets/xlsx.png" />
                      <div class="file-name" style="color:#777;font-weight:bold">
                        {{item.file_name}}
                      </div>
                      <div>
                        <a :href="item.file_path" target="_blank"><i class="el-icon-bottom"></i></a>
                      </div>
                    </div>
                  </div>

                  <div class="content-info">
                    操作:{{item.status}} 
                    操作描述:{{item.operdescr}}</div>
                  <!-- <div class=""></div> -->
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import { ImagePreview } from 'vant';
export default {

  props: {
    alldata: {
      type: Array,
      default: ()=>[]
    }
  },
  mounted() {

  },
  data() {
    return {

    }
  },
  methods: {
    handleClickFile(item){
      const imgTypeArr = ['jpg','png','gif']
      //console.log(item)
      if(imgTypeArr.indexOf(item.file_type)===-1){
        window.location.href=item.file_path
      }else{
        ImagePreview([item.file_path]);
      }
    }

  }

}
</script>

<style scoped>
.L-flex-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.L-timeLine-container {
  width: 90%;
  margin: 10px auto;
}
.L-timeLine-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* overflow: hidden; */
  border-left: 1px solid #eee;
  /* margin: 20px auto; */
  padding-bottom:20px;
}
.L-timeLine-item .line-side {
  width: 20px;
  height: 100%;
  position: relative;
}
.L-timeLine-item .line-side .point-box {
  width: 20px;
  height: 20px;
  border: 1px solid #eee;
  box-sizing: border-box;
  /* padding: 5px; */
  background: #fff;
  position: absolute;
  top: 0px;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.L-timeLine-item .line-side .point-box .point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #409EFF;
}
.L-timeLine-item .content-side {
  width: 95%;
  height: 100%;
}

.L-timeLine-item .content-side .node-container {
  width: 100%;
}
.L-timeLine-item .content-side .node-container .node-title {
  width: 100%;
  font-size: 16px;
  color: #999;
  font-weight: bold;
}

.L-timeLine-item .content-side .node-container .node-content {
  margin: 10px auto;
  border-radius: 6px;
  border: 1px solid #eee;
}

.L-timeLine-item .content-side .node-container .node-box .user-row {
  background: #f9f9f9;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
}
.L-timeLine-item .content-side .node-container .node-box .content-row {
  box-sizing: border-box;
  padding: 10px;
}

.L-timeLine-item
  .content-side
  .node-container
  .node-box
  .content-row
  .content-info {
  font-size: 12px;
  color: #999;
  margin: 10px auto;
}

.L-timeLine-item
  .content-side
  .node-container
  .node-box
  .content-row
  .file-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto;
  
}

.L-timeLine-item
  .content-side
  .node-container
  .node-box
  .content-row
  .file-item-row .file-name {
    width: 80%;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;

    text-overflow: ellipsis;
    white-space: nowrap;

  }




.L-timeLine-item
  .content-side
  .node-container
  .node-box
  .content-row
  .file-item-row img{
    width:30px;
    margin-right:10px;
    flex-grow: 0;
    flex-shrink: 0;

    
  }
</style>